<template>
  <el-col :span="8">
    <el-form ref="approvalSet" :model="approvalSet" :rules="rules" label-width="80px">
      <el-form-item label="审批名称" prop="templateName">
        <el-input v-model="approvalSet.templateName" />
      </el-form-item>
      <el-form-item label="审批类型" prop="processTypeId">
        <el-select v-model="approvalSet.processTypeId" placeholder="请选择审批类型">
          <el-option v-for="item in options" :key="item.id" :label="item.typeName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="审批图标" prop="iconUrl">
        <el-select v-model="approvalSet.iconUrl" placeholder="请选择审批图标" @change="changeIcon">
          <el-option v-for="item in optionsIconUrls" :key="item.id" :label="item.tag" :value="item.iconUrl">
            <img :src="item.iconUrl" style="width: 30px; height: 30px; vertical-align: text-bottom" />
          </el-option>
        </el-select>
        <el-row v-if="showUrl !== ''">
          <img :src="showUrl" style="width: 30px; height: 30px; vertical-align: text-bottom" />
        </el-row>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="approvalSet.description" type="textarea" />
      </el-form-item>
    </el-form>
  </el-col>
</template>

<script>
  import { getOptions } from '@/api/oaProcessType'
  import { save } from '@/api/oaProcessTemplate'
  export default {
    data() {
      return {
        options: [],
        showUrl: '',
        optionsIconUrls: [
          { id: 1, iconUrl: 'https://gw.alicdn.com/tfs/TB1t695CFYqK1RjSZLeXXbXppXa-102-102.png', tag: '请假' },
          { id: 2, iconUrl: 'https://gw.alicdn.com/tfs/TB1bHOWCSzqK1RjSZFjXXblCFXa-112-112.png', tag: '出差' },
          { id: 3, iconUrl: 'https://gw.alicdn.com/tfs/TB1Y8PlCNjaK1RjSZKzXXXVwXXa-112-112.png', tag: '加班' },
          { id: 4, iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '外出' },
          { id: 5, iconUrl: 'https://gw.alicdn.com/tfs/TB13ca1CMDqK1RjSZSyXXaxEVXa-102-102.png', tag: '调岗' },
          { id: 6, iconUrl: 'https://gw.alicdn.com/tfs/TB1U9iBCSzqK1RjSZPcXXbTepXa-102-102.png', tag: '离职' },
          { id: 7, iconUrl: 'https://gw.alicdn.com/tfs/TB1Yfa0CG6qK1RjSZFmXXX0PFXa-112-112.png', tag: '补卡' },
          { id: 8, iconUrl: 'https://gw.alicdn.com/tfs/TB1cbCYCPTpK1RjSZKPXXa3UpXa-112-112.png', tag: '机票出差' },
          { id: 9, iconUrl: 'https://gw.alicdn.com/tfs/TB11X99CNTpK1RjSZFKXXa2wXXa-102-102.png', tag: '居家隔离' },
          { id: 10, iconUrl: 'https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png', tag: '请假' },
          { id: 11, iconUrl: 'https://gw.alicdn.com/tfs/TB11pS_CFzqK1RjSZSgXXcpAVXa-102-102.png', tag: '费用申请' },
          { id: 12, iconUrl: 'https://gw.alicdn.com/tfs/TB13f_aCQzoK1RjSZFlXXai4VXa-102-102.png', tag: '携章外出' },
          { id: 13, iconUrl: 'https://gw.alicdn.com/tfs/TB1FNG.CMHqK1RjSZFgXXa7JXXa-102-102.png', tag: '邮寄快递申请' },
          {
            id: 14,
            iconUrl: 'https://gw.alicdn.com/imgextra/i3/O1CN01LLn0YV1LhBXs7T2iO_!!6000000001330-2-tps-120-120.png',
            tag: '合同审批'
          }
        ],
        approvalSet: {
          templateName: this.$store.getters.oaProcessTemplate.templateName
            ? this.$store.getters.oaProcessTemplate.templateName
            : '',
          processTypeId: this.$store.getters.oaProcessTemplate.processTypeId
            ? this.$store.getters.oaProcessTemplate.processTypeId
            : '',
          iconUrl: this.$store.getters.oaProcessTemplate.iconUrl ? this.$store.getters.oaProcessTemplate.iconUrl : '',
          description: this.$store.getters.oaProcessTemplate.description
            ? this.$store.getters.oaProcessTemplate.description
            : ''
        },
        rules: {
          templateName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          processTypeId: [{ required: true, message: '请选择审批类型', trigger: 'change' }],
          iconUrl: [{ required: true, message: '清选择图标', trigger: 'change' }],
          description: [
            { required: true, message: '请输入描述', trigger: 'blur' },
            { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.getOptions()
    },
    methods: {
      async getOptions() {
        const resault = await getOptions()
        this.options = resault
      },
      changeIcon(value) {
        this.showUrl = value
        this.approvalSet.iconUrl = value
      },
      async save() {
        await save(this.approvalSet)
      }
    }
  }
</script>

<style>
  .center-button {
    text-align: center;
  }
</style>
